<template>
  <div id="app">
    <!-- <div id="app" @click="isTimeOut"> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      printMedia: window.matchMedia,
      lastTime: null, // 最后一次的点击事件
      currentTime: null, // 当前点击的一次的时间触发
      timeOut: 60 * 60 * 1000 // 超时时间（一小时）
    };
  },
  created() {
    this.lastTime = new Date().getTime();
  },
  methods: {
    // 判断是否处于超时状态
    async isTimeOut() {
      this.currentTime = new Date().getTime();
      if (this.currentTime - this.lastTime > this.timeOut) {
        // 如果处于登录状态，超时不操作。弹出警告，跳转到登录界面
        if (sessionStorage.getItem("token")) {
          let { data: res } = await this.$http.get("/api/logout");
          window.sessionStorage.clear(); //清除缓存
          this.$store.commit("loginOut");
          this.$alert("抱歉，登录超时，请重新登录！", "警告⚠", {
            confirmButtonText: "确认",
            callback: () => {
              this.$router.replace("/"); // 退回登录界面
            }
          });
        } else {
          this.lastTime = new Date().getTime();
        }
      } else {
        this.lastTime = new Date().getTime();
      }
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
#app {
  width: 100%;
  height: 100%;
}
</style>
<style>
/*加载loading */
.el-loading-spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  font-weight: bold;
}

.el-loading-spinner i {
  color: #fff !important;
}

/* //修改文字的大小 */
.el-loading-mask .el-loading-spinner .el-loading-text {
  font-size: 26px;
  color: #fff;
}
</style>
